 <template>
  <view>
    <view class="search">
      <view class="search-content">
        <input placeholder="请输入课程的关键字" focus v-model="search_value" @confirm="search_timu"/>
        <view class="icon icon-sousuo" @tap="search_timu"></view>
      </view>
    </view>
    <view class="index-kecheng">
        <view class="index-content-qy">
          <block v-for="(item, index) in timu_info" :key="index">
            <view class="video-content" @tap="goto_detail(item)">
              <image class="video-content-img" :src="item.cover"></image>
              <view class="video-content-flex">
                <view>
                  <view class="video-content-h1">{{item.title }}</view>
                </view>
                <view class="video-content-learn">
                  <view class="video-content-detail">
                    <view class="video-content-detail-price video-content-detail-free" v-if="item.price==0.00">免费</view>
                    <view class="video-content-detail-price" v-else>￥{{item.price}}</view>
                    <view class="video-content-detail-r" v-if="item.price!=0.00">
                      <view v-if="item.vip_price==0.00" style="color: #ff4a4a">免费</view>
                      <view v-else>￥{{item.vip_price}}</view>
                      <image class="video-content-detail-img" :src="static_media.img01"></image>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </block>
        </view>
    </view>
    <right-menu></right-menu>
  </view>
</template>
<script>
import { mapState } from "vuex";
import rightMenu from '@/components/right-menu';
export default {
  data() {
    return {
      search_value: "",
      timu_info: []
    };
  },
  computed: {
    ...mapState(["userInfo"]),
    static_media () {
      return {
        img01: this.$lib.$config.localMedia + '/static/img/vip-price.png',
      }
    }
  },
  components: {rightMenu},
  methods: {
    async search_timu() {
      if (this.search_value.length > 0) {
        let res = await this.$lib.$http.post({
          url: this.$lib.$urlMap.courseList,
          data: {
            keyword:this.search_value,
            page:1,
            limit:10
          },
          needLogin: true
        });
        if (res.code === 1) {
          this.timu_info = res.data.data;
        }
      }
    },
    goto_detail (item) {
      uni.navigateTo({
        url: '/pages/index/detail?id=' + item.id
      })
    }
  }
};
</script>
<style>
page {
  background: #fff;
}
.search {
  background: #fff;
  color: #808080;
  padding: 14px 0;
}
.search-content {
  position: relative;
  width: 92%;
  margin: 0 auto;
  background:#f5f5f5;
  display: flex;
  justify-content: space-between;
  border-radius: 24px;
  padding: 9px 17px;
  align-items: center;
}
.search-content input{
  font-size: 13px;
}
/*课程列表*/
.index-kecheng {
  background: #fff;
}
.index-content-qy {
  width: 93%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.index-content-qy .video-content {
  margin-bottom: 13px;
  display: flex;
  align-items:self-start;
  padding-top: 0;
  border-bottom: solid 1px #f5f5f5;
  padding-bottom: 13px;
}
.index-content-qy .video-content:last-child {
  border-bottom: none!important;
  padding-bottom: 0;
}
.video-content-img {
    width: 114px;
    height: 82px;
    border-radius: 5px;
}
.video-content-flex {
  display: flex;
  flex-direction: column;
  align-items: start;
  text-align: left;
  flex: 1;
  padding-left: 12px;
  height: 82px;
  justify-content: space-between;
}
.video-content-h1 {
  color: #000;
  font-size: 16px;
  line-height: 20px;
  padding-bottom: 4px;
}
.video-content-learn {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}
</style>
